<template>
  <div class="kanban-wrapper">
    <div class="table-container" v-loading="Loading" element-loading-text="正在加载中">
      <table border id="placeholdPosition">
        <tr>
          <th style="width:100px">姓名</th>
          <template v-for="(item,index) in viewDatas">
            <th :key="index" style="width:150px">{{item}}</th>
          </template>
        </tr>
        <tr v-for="(item,index) in details" :key="index">
          <td>{{item.name}}</td>
          <template v-for="(item,index) in item.resourceDate">
            <td :key="index" class="q" style="width:150px;position:relative">
              <span v-for="(i,in1) in item" :key="in1" class="s" style="width:150px;display:flex">
                <el-tooltip placement="top">
                  <div slot="content">
                    <div style="margin-top:8px">[{{i.storyNum}}]{{i.storyName}}</div>
                    <template v-for="(i1,in2) in i.taskInof" class="as">
                        <div :key="in2" width="150" style="display:flex;margin:10px 0;">
                            [{{i1.taskNm}}]
                            <span style="padding-left:10px">{{i1.taskStatus}}</span>
                        </div>
                    </template>
                  </div>
                  <div>
                      <div style="width:100%;margin:10px 0;display:flex;height:13px">
                          <div class="online-hidden" style="width:113px">{{i.storyName}}</div>
                          <div style="color:green;font-weight:600;width:30px">[{{i.build}}]</div>
                      </div>
                  </div>
                </el-tooltip>
              </span>
            </td>
          </template>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      Loading: false,
      viewDatas: [
        "2021-12-02",
        "2021-12-03",
        "2021-12-04",
        "2021-12-05",
        "2021-12-06",
        "2021-12-07",
        "2021-12-08",
        "2021-12-09",
      ],
      details: [
        {
          name: "张三",
          resourceDate: [
            [],
            [],
            [
              {
                storyNum: "rdm-7015",
                storyName: "DC_新增应用补丁",
                taskInof: [{ taskNm: "数据报表", taskStatus: "待开发" }],
                build:1
              },
            ],
            [],
            [],
            [],
            [],
            [],
          ],
        },
        {
          name: "李四",
          resourceDate: [
            [],
            [],
            [
              {
                storyNum: "rdm-7015",
                storyName: "DC_新增应用补丁",
                taskInof: [{ taskNm: "数据报表", taskStatus: "待开发" }],
                build:2
              },
            ],
            [],
            [],
            [],
            [],
            [],
          ],
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.table-container{
    width: 100%;
    height: 400px;
    overflow: auto;
}
.table-container tr >th:first-child,
.table-container tr >td:first-child{
    position: sticky;
    left: -1px;
    z-index: 1;
}
.table-container tr>th{
    position: sticky;
    top: -2px;
    z-index: 2;
}
.table-container tr>th:first-child{
    z-index: 3;
}
.a{
    margin: 0 0 15px 945px;
}
table{
    border-collapse: collapse;
    border: 1px solid #dee6ec;
    th{
        background-color: #efefef;
        background-image: -webkit-linear-gradient(top,#fdfdfd 0%,#eaeaea 100%);
        font-size: 12px;
        color: #666;
        padding: 10px;
        height: 36px;
        padding-left: 10px;
    }
    td{
        font-size: 12px;
        color: #666;
        padding: 6px 0;
        height: 36px;
        padding-left: 10px;
    }
}
</style>